<script setup lang="ts">
import Bus from '@/utils/bus'

const emits = defineEmits(['search'])

const searchValue = ref('')

function onSearch() {
  emits('search', searchValue.value)
}

function addEvent() {
  Bus.$on('clearSearchValue', () => {
    searchValue.value = ''
  })
}

onMounted(() => {
  addEvent()
})
</script>

<template>
  <div class="input-wrap">
    <van-field
      v-model="searchValue"
      left-icon="search"
      placeholder="请输入搜索的内容"
    >
      <template #button>
        <div class="btn-search" @click="onSearch">
          搜索
        </div>
      </template>
    </van-field>
  </div>
</template>

<style scoped lang="less">
.input-wrap {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  border-radius: 20px;
}
.btn-search {
  padding: 5px 16px;
  border-radius: 20px;
  background: #d3eaf8;
  color: #0070bc;
}
::v-deep(.van-field) {
  border-radius: 46px;
  background: #fff;
  padding: 5px 8px;
}
::v-deep(.van-field__left-icon) {
  margin-top: 5px;
  color: #9d9b9d;
  font-size: 20px;
}
</style>
